<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../layui/layui.js" type="text/javascript"></script>
		<link href="../layui/css/layui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="layui-container" style="margin: 10px 0px; ">
			<form class="layui-form layui-form-pane">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">父菜单</label>
						<div class="layui-input-inline" style="width: 225px;">
							<input type="radio" name="checkPid" lay-filter="checkPid" value="0" title="顶层菜单" checked/>
							<input type="radio" name="checkPid" lay-filter="checkPid" value="1" title="子菜单" />
						</div>	
						<div class="layui-input-inline">
							<input type="text"  id="paretId" value="0" class="layui-input" name="pid" id="pid" style="width: 350px;display: none;" />
							<input type="hidden" id="pid" />
						</div>	
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">菜单名称</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="name" />
					</div>	
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单图标</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="icon" />
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单类型</label>
						<div class="layui-input-inline">
							<input type="radio" name="type" value="menu" title="菜单" checked/>
							<input type="radio" name="type" value="btn" title="功能" />
						</div>	
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜单url</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="url" />
					</div>	
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单标识</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="remark" />
						</div>	
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单顺序</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="sort" lay-veritfy />
						</div>	
					</div>
				</div>
				<div class="layui-form-item" style="display: none;">
					<div class="layui-input-block">
						<a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
					</div>	
				</div>
			</form>
		</div>
		<script>
			
			var $;
			layui.config({
				base:'../js/'
			})
			layui.use(['form','jquery','treeSelect'],function(){
				var form = layui.form,treeSelect=layui.treeSelect;
				$ = layui.jquery;
				
				form.on('radio(checkPid)',function(data){
					var value = data.value;
					if(value==0){
						$('#paretId').val(0);
						$('.layui-treeSelect').css('display','none');
						$('#pid').css('display','none');
					}else{
						$('#paretId').val("");
						$('#pid').css('display','block');
					}
				})
			//菜单下拉数
			treeSelect.render({
				elem:'#pid',
				seach:true,
				data:'../data/treeSelect.json',
				type:'get',
				success:function(data){
					$('.layui-treeSelect').css('width','380px');
					$('.layui-treeSelect').css('display','none');
				},
				click:function(data){
					var current=data.current;
					var pid=current.id;
					$("#paretId").val(pid);
				}
				
			})
			});
		</script>
	</body>
</html>
